<template>
	<view class="yhpj">
		<view class="yhpj-con">
			<view class="yhpj-all">
				<view class="yhpj-all-fs">用户评论
					<text class="yhpj-all-sl">{{totalNumber}}</text>
				</view>
				<!-- <view class="ckgd" @click="nato" v-if="pjinfo.length>3">
					查看更多
					<image :src="getImg('bh-faxian-gl-jiantou1.png')" mode="aspectFill"></image>
				</view> -->
			</view>
			<view class="yhpl1" v-if="pjinfo.length==0">
				暂无评论
			</view>
			<view class="yhpl" v-for="(el,ind) in pjinfo">
				<view class="yhxx">
					<image class="yhxx-img" :src="el.comImg"></image>
					<view class="yhxx-name">
						{{el.comName}}
					</view>
				</view>
				<view class="yhplxx">
					{{el.content}}
				</view>
				<view class="plsj">
					<image :src="getImg('bh-tc-icon-shijian.png')"></image>
					{{el.createTime}}
				</view>
			</view>
			<view class="ckpj" @click="gotopj">
				<image :src="getImg('wfxcx-icon-xpl.png')" mode="aspectFill"></image>
				留下您的点评
			</view>
		</view>
	</view>
</template>

<script>
	var web = require('../../components/utils/request.js');
	export default {
		props: ['info'],
		data() {
			return {
				pjinfo:[],
				totalNumber:0,
				normalSrc: '../../static/star-null-big_hong1.png',
				selectedSrc: '../../static/star-on-big_hong1.png',
				alldata:{},
				totalPage:1,
				pageNo:1
			}
		},
		watch:{
			info(){
				this.getPinlun();
			}
		},
		created() {
			
		},
		onReachBottom() {
			if (this.pageNo < this.totalPage) {
				this.pageNo++;
				this.getPinlun();
			}
		},
		methods: {
			getImg(url) {
				return 'https://hshd.tour-ma.com/r/cms/www/weifang/ximg/' + url
			},
			nato(){
				var url='/pages/wode/pingjia?waresId='+this.info.waresId+'&orderType='+this.info.orderType;
				uni.navigateTo({
					url:url
				})
			},
			getImg1(url){
				return 'https://hshd.tour-ma.com'+url
			},
			getImg(url){
				return 'https://hshd.tour-ma.com/r/cms/www/weifang/ximg/'+url
			},
			getPinlun(){
				var url='/content/comment_list.jspx';
				var para={
					id:this.info.id,
					pageNo:this.pageNo,
					pageSize:5,
				}
				var that=this;
				web.httpPost(that,url,para,function(res){
					var tmp=[];
					var json=res.data.data;
					if(that.pageNo==1){
						tmp=json;
					}else{
						tmp=that.pjinfo;
						for(var i=0;i<json.length;i++){
							tmp.push(json[i])
						}
					}
					that.totalPage=res.data.totalPage;
					that.totalNumber=res.data.totalNumber;
					that.pjinfo=tmp;	
				})
			},
			gotopj(){
				uni.navigateTo({
					url:'/pages/index/glpl?id='+this.info.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.allpl{
		width: 700rpx;
		display: flex;
		align-items: baseline;
		margin: 40rpx 0 30rpx;
		line-height: 42rpx;
		.pfx{
			display: flex;
			align-items: center;
			margin-left: 35rpx;
			.pfxlist{
				font-size: 29rpx;
				color: #999999;
				text{
					margin-left: 10rpx;
				}
				margin-right: 20rpx;
			}
		}
		.zpf{
			font-size: 56rpx;
			font-weight: 550;
			color: #FF540B;
			text{
				font-weight: 500;
				font-size: 29rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}
	}
	.plsj{
		font-size: 25rpx;
		color: #AAAAAA;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		image{
			width: 22rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}
	}
	.imglist{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 0 28rpx;
		.leftimg{
			border-radius: 17rpx 0 0 17rpx;
		}
		.rightimg{
			border-radius: 0 17rpx 17rpx 0;
		}
		image{
			width: 231rpx;
			height: 215rpx;
			margin-right: 4rpx;
		}
	}
	.scitemstarts{
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		.star-image{
			width: 28rpx;
			height: 26rpx;
			margin-right: 7rpx;
		}
	}
	.yhpj-all-img {
		width: 9upx;
		height: 15upx;
		margin-left: 10upx;
		margin-top: 5upx;
	}
	.ckpj image{
		width: 30rpx;
		height: 33rpx;
		margin-right: 10rpx;
	}
	.ckpj {
		margin-top: 48upx;
		height: 51upx;
		text-align: center;
		line-height: 40upx;
		font-size: 26rpx;
		color: #008cff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.yhplxx {
		margin-top: 15rpx;
		line-height: 45rpx;
		font-size: 24rpx;
		color: #505050;
		min-height: 80rpx;
	}

	.yhxx-time {
		position: absolute;
		top: 5upx;
		right: 0;
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}

	.yhxx-name-pftxt {
		display: block;
		font-size: 28upx;
		color: rgba(93, 163, 67, 1);
		margin-top: 6upx;
	}

	.yhxx-name-txt {
		font-size: 30upx;
		color: rgba(153, 153, 153, 1);
	}

	.yhxx-name {
		margin-left: 25upx;
		font-size: 29rpx;
		color: #333;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.yhxx-img {
		width: 63upx;
		height: 63upx;
		border-radius: 50%;
	}

	.yhxx {
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
	}
	.yhpl1{
		text-align: center;
		color: #666;
		font-size: 24rpx;
	}
	.yhpl {
		margin-top: 30rpx;
	}

	.yhpj-all-sl {
		font-size: 25upx;
		color: #999;
		margin-left: 15rpx;
	}

	.yhpj-all-pj {
		font-size: 32upx;
		color: #5DA343;
		margin-right: 350upx;
	}

	.yhpj-all-fs {
		color: #333333;
		font-size: 32upx;
	}
	.yhpj-con{
		width: 670rpx;
		height: 100%;
		background: #fff;
		margin-top: 30rpx;
		padding:30rpx 20rpx;
		border-radius: 10rpx;
		position: relative;
	}
	.yhpj-all {
		width: 630upx;
		font-size: 28upx;
		color: #222;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		.ckgd{
			font-size: 28rpx;
			color: #5A8BFC;
			display: flex;
			align-items: center;
			image{
				width: 13rpx;
				height: 21rpx;
				margin-left: 10rpx;
			}
		}
	}

	.yhpj {
		width: 750upx;
		background: rgba(247,249,252,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
	}
</style>
